<template>
    <div class="container">
        <!-- 搜索框 -->
        <search ref="mysearch" @doReset="doReset" @doQuery="doRefresh" :ruleform="ruleForm">
            <template slot="top">
                <el-form-item label="mongodb名称:" prop="mongodbId" size="small" label-width="110px">
                    <el-select v-model="ruleForm.mongodbId" placeholder="请选择mongodb名称">
                        <el-option value="" label="全部"></el-option>
                        <el-option v-for="(item, index ) in mongodbOption" :label="item.name" :value="item.id"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否存活:" prop="active" size="small" label-width="105px">
                    <el-select v-model="ruleForm.active" style="width:100%">
                        <el-option value="" label="全部"></el-option>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启动时间:" prop="createDate" size="small" class="datePicker" label-width="105px">
                    <!-- <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.startTime"
                        value-format="yyyy-MM-dd hh:mm:ss">
                    </el-date-picker> -->
                    <el-date-picker v-model="ruleForm.createDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="问题描述:" prop="description" size="small" label-width="105px">
                    <el-input v-model="ruleForm.description" placeholder="请输入问题描述"></el-input>
                </el-form-item>
            </template>
        </search>
        <!-- 表格 -->
        <myTable ref="mytable" :config="tableconfig">
            <!-- 启用 -->
            <template v-slot:active="{ data }">
                <p v-if="data.active == 1">是</p>
                <p v-else style="color:red;font-weight: 700;">否</p>
            </template>
             <!-- 问题描述 -->
             <template v-slot:description="{data}">
                <p v-if="data.description == null">-</p>
                <p v-else>{{ data.description }}</p>
            </template>
        </myTable>
    </div>
</template>

<script>
import search from "../data/search.vue"
import myTable from "@/components/table.vue";
import { mongodbRecordList, mongodbNameList } from "@/api/middleware.js"
export default {
    components: {
        search,
        myTable
    },
    data() {
        return {
            mongodbOption: [],
            ruleForm: {
                active: "",
                description: "",
                name: "",
                mongodbId:"",
                startTime: "",
                endTime: "",
                createDate: [],
                pageNo: 1,
                pageSize: 20
            },
            tableconfig: {
                loading: false,
                isselection: false,
                ispagination: true,
                tabledata: [],
                isindex: true,
                thead: [
                    { sort: null, label: "mongodb名称", prop: "name", width: 300},
                    { sort: null, label: "是否存活", prop: "active", type: 'slot', width: 150 },
                    { sort: null, label: "启动时间", prop: "startTime", width: 200 },
                    { sort: null, label: "问题描述", prop: "description",type:'slot' },
                ],
                currentpage: 1,
                pagesize: 0,
                total: 0,
            },
            formLabelWidth: '120px',
        }
    },
    mounted() {
        this.handleList();
        this.handleNameList();
    },
    methods: {
        // 获取名称列表
        handleNameList() {
            mongodbNameList().then(res => {
                if (res.success) {
                    this.mongodbOption = res.result;
                }
            })
        },
        // 重置
        doReset() {
            console.log(Object.keys(this.ruleForm).slice(0, -2), "this.ruleForm");
            Object.keys(this.ruleForm).slice(0, -2).map(item => {
                this.ruleForm[item] = "";
            });
            // this.$message({
            //     message: "已重置",
            //     type: "success",
            // });
            this.doRefresh();
        },
        // 搜索
        doRefresh() {
            this.tableconfig.currentpage = 1;
            this.ruleForm.pageNo = 1;
            //表格回到顶部
            this.$refs.mytable.$emit("handleGoTop");
            this.handleList()
        },
        // 页码数更新
        handleSizeChange(val) {
            console.log('tag', val)
            this.ruleForm.pageNo = 1;
            this.ruleForm.pageSize = val;
            this.handleList();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        // 当前页码更新
        handleCurrentChange(val) {
            console.log('val', val)
            this.ruleForm.pageNo = val;
            console.log(this.ruleForm.pageNo, 'this.tableconfig.currentpage');
            this.handleList();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        // 日志列表
        async handleList() {
            this.tableconfig.loading = true;
            this.tableconfig.currentpage = this.ruleForm.pageNo;
            this.tableconfig.pagesize = this.ruleForm.pageSize;
            this.ruleForm.startTime = this.ruleForm.createDate[0];
            this.ruleForm.endTime = this.ruleForm.createDate[1];
            let mongodbResult = await mongodbRecordList(this.ruleForm)
            if (mongodbResult.success) {
                this.tableconfig.tabledata = mongodbResult.result.list;
                this.tableconfig.total = mongodbResult.result.total;
                this.ruleForm.pageNo = mongodbResult.result.pageNum;
                this.ruleForm.pageSize = mongodbResult.result.pageSize;
            }
            this.tableconfig.loading = false
        },
    }
}
</script>

<style scoped lang="scss">
.datePicker ::v-deep .el-range-separator {
    width: 30px;
}
</style>